<template>
    <div class="left-bar-item">

        <el-submenu :index="index+''" :key="index" v-for="(item,index) in menuItems">
            <template slot="title">
                <i :class="item.menuIcon"></i>
                <span slot="title" v-show="!isCollapse">{{item.menuName}}</span>
            </template>
            <el-menu-item-group v-if="hasItems(item)" v-for="(item2,index2) in item.children" :key="index2*11">
                <el-menu-item :index="item2.menuLink" v-if="isMenu(item2)">{{item2.menuName}}</el-menu-item>
            </el-menu-item-group>
        </el-submenu>

    </div>
</template>

<script>
    export default {
        name: "LeftBarItem",
        props:{
            menuItems:{
                required:true
            },
            isCollapse:{
                required:true
            }
        },
        methods:{
            hasItems(item) {
                return item.children !== undefined ? item.children.length > 0  : false;
            },
            isMenu(list){
                return list.menuRole == '1'
            }
        }
    }
</script>

<style scoped>

</style>